<template>
	<view class="container">
		<view class="person_box" v-for="item in person">
			<view class="avatar" style="margin-right: 24upx;">
				<image :src="item.ownerEntity.profile || defaultAvatar" class="avatar"></image>
			</view>
			<view class="person_msg">
				<view style="display: flex;justify-content: space-between;">
					<view class="person_position">
						<view :class="{level0:item.relEntity.hierarchy == 0,
						level1:item.relEntity.hierarchy == 1,
						level2:item.relEntity.hierarchy == 2}" class="position_box">
							<!-- <view class="level0 position_box"> -->
							<text>{{item.relEntity.post}}</text>
						</view>
						<view class="person_name">{{item.ownerEntity.name}}</view>
					</view>
					<view>{{item.ownerEntity.telNo}}</view>
				</view>
				<view v-if="item.relEntity.synopsis" class="msg_details">{{item.relEntity.synopsis}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultAvatar: '/static/image/avatar.png',
				organizationId: '',
				person: [],
				// person: [
				// 	{
				// 	avatar: '',
				// 	position: '书记',
				// 	level: 0,
				// 	name: '王建军',
				// 	details: '男，汉族，1956年7月出生，研究生学历，中共党员。'
				// }, {
				// 	avatar: '',
				// 	position: '副书记',
				// 	level: 1,
				// 	name: '孙建博',
				// 	details: '男，汉族，1959年10月出生，研究生学历，中共党员，山东省淄博市林业局调研员、山东省原山林场党委书记，十三届全国人大代表。'
				// }, {
				// 	avatar: '',
				// 	position: '组织委员',
				// 	level: 2,
				// 	name: '刘畅',
				// 	details: '女，汉族，1980年7月出生，中共党员。'
				// }, {
				// 	avatar: '',
				// 	position: '宣传委员',
				// 	level: 2,
				// 	name: '郭峰',
				// 	details: '男，汉族，1976年6月出生，中共党员。'
				// }, {
				// 	avatar: '',
				// 	position: '纪检委员',
				// 	level: 2,
				// 	name: '王希伟',
				// 	details: '男，汉族，1969年2月出生。'
				// } ]
			}
		},
		onLoad(option) {
			if (option) {
				this.organizationId = option.id
				this.getDetail()
			}
		},
		methods: {
			getDetail() {
				let params = {
					"organizationId": this.organizationId,
					"page": 1,
					"pageSize": 3
				}
				this.$api.request.queryMember(params, (res) => {
					if (res.body.status.statusCode === '0') {
						console.log(res.body)
						this.person = res.body.data.list;
						// var total = res.body.data.total
						// if (this.partyList.length >= total) {
						// 	this.loadingType = 'noMore'
						// }
					} else {
						this.$api.msg("系统出错了")
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		/* background-color: #FBFBFB; */
		overflow: hidden;
		padding: 32upx;
	}

	.person_msg {
		width: 100%;
	}

	.person_box {
		display: flex;
		padding: 24upx;
		margin-bottom: 12upx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 2upx 2upx 22upx -2upx rgba(0, 0, 0, 0.2);
	}

	.avatar {
		height: 100upx;
		width: 100upx;
		border-radius: 50upx;
		background-size: contain
	}

	.person_position {
		display: flex;
		margin-bottom: 16upx;
		float: left;
	}

	.position_box {
		border-radius: 10px;
		padding: 0 18upx;
		text-align: center;
		line-height: 40upx;
		color: white;
		font-size: 24upx;
		margin-right: 16upx;
	}

	.level0 {
		background: #FF814A;
	}

	.level1 {
		background: #75BA9E;
	}

	.level2 {
		background: #60C1D2;
	}

	.person_name {
		font-size: 30upx;
	}

	.msg_details {
		color: #7A7A7A;
		font-size: 26upx;
	}
</style>
